<template>
    <div class="isMask">
        <div class="isMask_mask" @click="cencleClick"></div>
        <div class="isMask_Content" @click="">
            <div class="isMask_Content_Header">
                <text class="isMask_Content_Header_Title">配送方式</text>
                <icon content="md-close-circle" class="isMask_Content_Header_Icon" @click="cencleClick"></icon>
            </div>
            <div class="isMask_Content_Content" v-for="(item,index) in distribution" v-key="item" @click="chooseClick(index)">
                <text class="isMask_Content_Content_Title">{{item.title}} {{item.subtitle}}</text>
                <div :class="[item.status == true ?'isMask_Content_Content_IconBox':'isMask_Content_Content_No_IconBox']">
                    <icon content="md-checkmark" class="isMask_Content_Content_Icon"></icon>
                </div>
            </div>
            <div class="isMask_Botton">
                <div class="isMask_Botton_Box botton_Bg_Color" @click="completeClick">
                    <text class="isMask_Botton_Title botton_Fz_Color">完成</text>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                distribution: [],
                index:0
            }
        },
        props:[
            'shippingMethods','shippingMethod'
        ],
        created(){
            // this.distribution[0].status = true
        },
        mounted(){
            var _this = this
            console.log(_this.shippingMethods)
            _this.distribution = []
            console.log(this.shippingMethods)
            _this.shippingMethods.forEach(function(item){
                if(item == 0){
                    var distribution = {
                        title: '普通快递',
                        status: false,
                        id:0
                    }
                    _this.distribution.push(distribution)
                } else if (item == 1){
                    var distribution = {
                        title: '到店核销',
                        status: false,
                        id:1
                    }
                    _this.distribution.push(distribution)
                }else if (item == 2){
                    var distribution = {
                        title: '同城配送',
                        status: false,
                        id:2
                    }
                    _this.distribution.push(distribution)
                }
            })
            _this.distribution.forEach(function(item){
                if (item.id == _this.shippingMethod){
                    item.status = true
                }
            })
            _this.$forceUpdate()
        },
        methods:{
            chooseClick(data) {
                var _this = this
                _this.distribution.forEach(function(item) {
                    item.status = false
                })
                _this.distribution[data].status = !_this.distribution[data].status
                _this.index = data
                _this.$forceUpdate()
            },
            completeClick(){
                var completeDelivery = { completeDelivery: this.distribution[this.index]};
                this.$emit('completeDelivery',completeDelivery)
            },
            cencleClick(){
                var cencleDelivery = { cencleDelivery: false };
                this.$emit('cencleDelivery',cencleDelivery)
            }
        },
    }
</script>
<style lang="css" src="../../../../style/wx.css"/>
<style scoped>
    .isMask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 999
    }
    .isMask_mask{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.3)
    }
    .isMask_Content {
        width: 750px;
        height: 800px;
        background-color: white;
        position: fixed;
        bottom: 0;
        padding: 20px;
        box-sizing: border-box;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
    }

    .isMask_Content_Header {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-bottom: 50px;
    }

    .isMask_Content_Header_Title {
        font-size: 30px;
    }

    .isMask_Content_Header_Icon {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 50px;
        height: 35px;
    }

    .isMask_Content_Content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .isMask_Content_Content_Title {
        font-size: 24px;
    }

    .isMask_Content_Content_IconBox {
        width: 30px;
        height: 30px;
        border-radius: 50px;
        background-image: linear-gradient(to bottom, rgba(233, 88, 79, 1), rgba(241, 114, 80, 1));
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .isMask_Content_Content_No_IconBox{
        width: 30px;
        height: 30px;
        border-radius: 50px;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(0, 0, 0, 0.3);
    }

    .isMask_Botton {
        width: 750px;
        position: absolute;
        bottom: 30px;
        left: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .isMask_Botton_Box {
        width: 690px;
        height: 80px;
        border-radius: 40px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .isMask_Botton_Title {
        font-size: 30px;
        /* color: white; */
    }

    .isMask_Content_Content_Icon{
        width: 30px;
        height: 30px;
        color: white;
        font-size: 24px;
    }
</style>
